<template>
  <div class="hoursItem flex-left-T-B">
    <div class="temperature_num" :style="temperatureColor">{{ hoursInfo_data.temp }}</div>
    <i
      class="temperature_icon"
      :class="'qi-' + hoursInfo_data.icon"
      :style="iconColor"
    ></i>
    <div class="hoursItem_text">{{ hoursInfo_data.text }}</div>
    <div class="hoursItem_time">{{ time }}</div>
    <!-- <div style="font-size: 0.12rem">{{ currentData }}</div> -->
  </div>
</template>

<script>
export default {
  name: "HoursInfo",
  data() {
    return {
      is_temperature: 30,
    };
  },
  props: {
    hoursInfo_data: Object,
  },
  computed: {
    time() {
      let d = new Date(this.hoursInfo_data.fxTime),
        h = d.getHours() < 10 ? "0" + d.getHours() : d.getHours(),
        f = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
      return h + ":" + f;
    },
    iconColor() {
      return this.hoursInfo_data.temp >= this.is_temperature
        ? "color: rgba(220, 53, 69, 1)"
        : "color: rgba(40, 167, 69, 1)";
    },
    temperatureColor() {
      return this.hoursInfo_data.temp >= this.is_temperature
        ? "color: rgba(238, 10, 36, 1)"
        : "";
    }
  },
};
</script>

<style scoped>
.hoursItem {
  flex: 0 0 0.5rem;
  border-right: 0.02rem solid #ebedf0;
}
.hoursItem:nth-child(1) {
  border-left: 0.02rem solid #ebedf0;
}
.temperature_icon {
  font-size: 0.3rem;
  color: rgb(40, 167, 69);
}
.temperature_num {
  position: relative;
  font-size: 0.16rem;
  margin-bottom: 0.13rem;
  font-weight: 600;
}
.temperature_num::after {
  content: "°";
  position: absolute;
  top: 0;
  font-size: 0.18rem;
}
.hoursItem_text {
  font-size: 0.14rem;
  margin-bottom: 0.1rem;
}

.hoursItem_time {
  font-size: 0.13rem;
}
</style>